import React from 'react';
import moment from 'moment';
import api from 'js/api/index';
import { List } from 'antd-mobile';
import InfiniteScroll from 'react-infinite-scroller';
import { SelectDate, SelectDateComponent } from 'views/component/selectDate/selectDate';
import SelectTitle from 'views/component/selectTitle/selectTitle';
import { SubViewLink } from 'views/component/subViewLink/subViewLink';
import TableBox from 'views/component/table/table';
import { i18n } from 'js/core/i18n';
import './eas.scss';

let pagesize = 10;

class EAS extends React.Component {
  constructor() {
    super()
    this.query = {
      ShopId: '',
      start: moment().add(-100, 'days').format('YYYY-MM-DD'),
      end: moment().format('YYYY-MM-DD'),
      pagesize: pagesize,
      pageindex: 1,
    }
    this.state = {
      shop: null,
      start: moment().add(-100, 'days').format('YYYY-MM-DD'),
      end: moment().format('YYYY-MM-DD'),
      hasMore: false,
      data: [],
    }
  }
  componentDidMount = () => {
    this.ShopList();
  }
  ShopList = () => {
    api('/BaseSet/ShopList').then(data => {
      this.query.ShopId = data.data[0].ShopId;
      this.setState({ Shop: data.data[0], data: [], hasMore: true })
    });
  }
  shopNameOnChange = (shopInfo) => {
    this.query.ShopId = shopInfo.ShopId;
    this.query.pageindex = 1;
    this.setState({ data: [], shop: shopInfo, hasMore: true })
  }
  loadMore = () => {
    if (this.state.hasMore) {
      api('/EAS/EASList', this.query).then((data) => {
        this.state.data = this.state.data.concat(data.data);
        this.query.pageindex += 1;
        if (data.data.length < pagesize) {
          this.setState({ data: this.state.data, hasMore: false })
        } else {
          this.setState({ data: this.state.data })
        }
      });
    }
  }

  dateOnChange = (value) => {
    this.query.start = value[0];
    this.query.end = value[1];
    this.query.pageindex = 1;
    this.setState({ start: value[0], end: value[1], data: [], hasMore: true })
  }
  render() {
    let { hasMore, data, shop, start, end } = this.state;
    return <div id="eas" className="flex-col">
      <div className="device-container">
        <List className="picker-list mb20">
          <div className="deviceItem device-border flex-vcenter">
            <SelectTitle classStyle="name">{i18n.get('选择店铺')}</SelectTitle>
            <SubViewLink moduleName="shopSearch" className="flex-g-1 text-right deviceItemContent" title={i18n.get("选择店铺")} modelData={{ onChange: this.shopNameOnChange }}>
              {shop ? shop.ShopName : <div style={{ color: '#909090' }}>{i18n.get('选择店铺')}</div>}
            </SubViewLink>
          </div>
          <SelectDateComponent className="deviceItem device-border flex-vcenter" value={[start, end]} onChange={(value) => { this.dateOnChange(value) }}>
            <SelectTitle classStyle="add-group">{i18n.get("时段选择")}</SelectTitle>
            <div className="flex-g-1 text-right deviceItemContent">
              {start}-{end}
            </div>
          </SelectDateComponent>
        </List>
      </div>
      <div className="flex-g-1 scroll-absolute">
        <div>
          <InfiniteScroll
            pageStart={0}
            useWindow={false}
            loadMore={this.loadMore}
            hasMore={hasMore}
            threshold={50}
          >
            <TableBox heads={[i18n.get('门店名称'), i18n.get('设备ID'), i18n.get('报警时段')]} >
              {data.map((item, index) => (
                <tr key={item.ID}>
                  <td>{item.ShopName}</td>
                  <td>{item.devid}</td>
                  <td>{moment(item.AlarmDate).format('YYYY-MM-DD HH:mm')}</td>
                </tr>
              ))}
            </TableBox>
          </InfiniteScroll>
        </div>
      </div>
    </div>
  }
}

export default EAS;